<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{common/layoutAdmin}">

<head>
	<meta charset="UTF-8">
	<title>食物信息</title>
</head>

<body>
	<div layout:fragment="fragment_body">
		<el-row :gutter="20">
			<el-col :span="24">
				<el-button type="primary" @click="openFoodInfo(null)">添 加</el-button>
				<el-table :data="foodInfos" border highlight-current-row style="width: 100%">
					<!-- -->
					<el-table-column prop="foodTypeId" label="分类">
						<template slot-scope="scope">
						{{scope.row.type.typeTitle}}
						</template>
					</el-table-column>
					<el-table-column prop="foodTitle" label="名称"></el-table-column>
					<el-table-column prop="foodImg" label="图片">
						<template slot-scope="scope">
							<img v-if="scope.row.foodImg" :src="scope.row.foodImg" class="avatar-sm">
						</template>
					</el-table-column>
					<el-table-column prop="foodCalorie" label="卡路里">
						<template slot-scope="scope">
							{{scope.row.foodCalorie}}千卡
						</template>
					</el-table-column>
					<el-table-column prop="foodCarbon" label="碳水">
						<template slot-scope="scope">
							{{scope.row.foodCarbon}}碳水/{{scope.row.foodKg}}克
						</template>
					</el-table-column>
					<!--<el-table-column prop="foodKg" label="克数"></el-table-column>-->
					<el-table-column prop="foodTime" label="时间"></el-table-column>
					<el-table-column label="操作" width="160px">
						<template slot-scope="scope">
							<el-button @click="openFoodInfo(scope.row)" type="text" size="small">修 改</el-button>
							<el-popconfirm title="是否删除？" @confirm="delFoodInfo(scope.row.foodId)">
								<el-button slot="reference" type="text" size="small">删 除</el-button>
							</el-popconfirm>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
		<!--弹框-->
		<el-dialog :title="foodInfoForm.ttitle" :visible.sync="foodInfoForm.visible" width="30%">
			<el-form :model="foodInfoForm" :rules="foodInfoRules" ref="foodInfoForm">
				<!-- -->
				<el-form-item label="分类" prop="foodTypeId" label-width="100px">
					<el-select v-model="foodInfoForm.foodTypeId" filterable placeholder="请选择">
				    <el-option
				      v-for="item in typeList"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
			    </el-select>
				</el-form-item>
				<el-form-item label="名称" prop="foodTitle" label-width="100px">
					<el-input v-model="foodInfoForm.foodTitle"></el-input>
				</el-form-item>
				<el-form-item label="图片" prop="foodImg" label-width="100px">
					<el-upload class="avatar-uploader" action="/file/upload" :show-file-list="false"
						:on-success="handleAvatarSuccess">
						<img v-if="foodInfoForm.foodImg" :src="foodInfoForm.foodImg" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item label="卡路里" prop="foodCalorie" label-width="100px">
					<el-input v-model="foodInfoForm.foodCalorie">
						 <template slot="append">千卡</template>
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-col :span="12">
					<el-form-item label="每" prop="foodKg" label-width="100px">
						<el-input v-model="foodInfoForm.foodKg">
							 <template slot="append">克数</template>
						</el-input>
					</el-form-item>
					</el-col>
					<el-col :span="12">
					<el-form-item label="包含" prop="foodCarbon" label-width="100px">
						<el-input v-model="foodInfoForm.foodCarbon">
							 <template slot="append">碳水</template>
						</el-input>
					</el-form-item>
					</el-col>
				</el-form-item>
				<!--<el-form-item label="时间" prop="foodTime">
					<el-input v-model="foodInfoForm.foodTime"></el-input>
				</el-form-item>-->
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeFoodInfo">取 消</el-button>
				<el-button type="primary" @click="saveFoodInfo">保 存</el-button>
			</span>
		</el-dialog>
	</div>
</body>
<script type="text/javascript" layout:fragment="fragment_script">
	let vueData = {
		foodInfos: [],
		selectFoodInfo: null,
		typeList:[],
		foodInfoForm: {
			visible: false,
			ttitle: '新增/修改',
			foodId : '',
			foodTypeId : '',
			foodTitle : '',
			foodImg : '',
			foodCalorie : '',
			foodCarbon : '',
			foodKg : '',
		},
		foodInfoQuery: {
			page: '',
			size: '',
		},
		foodInfoRules: {
			/**foodId: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],**/
			foodTypeId: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			foodTitle: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			foodImg: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			foodCalorie: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			foodCarbon: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			foodKg: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],
			/**foodTime: [
				{required: true, message: '不能为空', trigger: 'blur'}
			],**/
		},
	}
	let vueMethods = {
		getFoodTypes() {
			let that = this
			postRequst('/getTypes', that.foodTypeQuery, true).then(function (resp) {
				that.foodTypes = resp.rows
				if (resp.rows && resp.rows.length > 0) {
					for(type of resp.rows){
						that.typeList.push({
							label: type.typeTitle,
							value: type.typeId
						})
					}
				}
			})
		},
		getFoodInfos() {
			let that = this
			postRequst('/getFoods', that.foodInfoQuery, true).then(function (resp) {
				that.foodInfos = resp.rows
				if (resp.rows && resp.rows.length > 0) {
					that.selectFoodInfo = resp.rows[0]
				}
			})
		},
		openFoodInfo(row) {
			let that = this
			if (row) {
				that.foodInfoForm.ttitle = '修改'
				that.foodInfoForm.foodId = row.foodId
				that.foodInfoForm.foodTypeId = row.foodTypeId
				that.foodInfoForm.foodTitle = row.foodTitle
				that.foodInfoForm.foodImg = row.foodImg
				that.foodInfoForm.foodCalorie = row.foodCalorie
				that.foodInfoForm.foodCarbon = row.foodCarbon
				that.foodInfoForm.foodKg = row.foodKg
			} else {
				that.foodInfoForm.ttitle = '新增'
				that.foodInfoForm.foodId = ''
				that.foodInfoForm.foodTypeId = ''
				that.foodInfoForm.foodTitle = ''
				that.foodInfoForm.foodImg = ''
				that.foodInfoForm.foodCalorie = ''
				that.foodInfoForm.foodCarbon = ''
				that.foodInfoForm.foodKg = '100'
			}
			that.foodInfoForm.visible = true
		},
		closeFoodInfo() {
			this.$refs["foodInfoForm"].resetFields();
			this.foodInfoForm.visible = false
		},
		saveFoodInfo() {
			let that = this
			this.$refs["foodInfoForm"].validate((valid) => {
				if (valid) {
					postRequst('/saveFood', that.foodInfoForm).then(function (resp) {
						if (resp.status == 0) {
							that.getFoodInfos()
							that.foodInfoForm.visible = false
							that.$message({message: resp.msg, type: "success"});
						} else {
							that.$message({message: resp.msg, type: "error"});
						}
					})
				}
			});
		},
		delFoodInfo(foodId) {
			let that = this
			postRequst('/delFood', {foodId: foodId}, true).then(function (resp) {
				if (resp.status == 0) {
					that.getFoodInfos()
					that.$message({message: resp.msg, type: "success"});
				} else {
					that.$message({message: resp.msg, type: "error"});
				}
			})
		},
		handleAvatarSuccess(res, file) {
			let imageUrl = URL.createObjectURL(file.raw);
			this.foodInfoForm.foodImg = res.data
		},
	}
	function vueCreated() {
		let that = this
		that.getFoodInfos()
		that.getFoodTypes()
	}
</script>

</html>